import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { asyncFetchList } from "../../store/home/homeSlice";
import style from './style.module.css'
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const homeList = useAppSelector((state) => state.home.homeList);
  const loading = useAppSelector((state) => state.home.loading);
  const dispatch = useAppDispatch();
	const navigate = useNavigate()
  useEffect(() => {
    dispatch(asyncFetchList());
  }, []);

  if (loading) {
    return <div>数据加载中...</div>;
  }

  return (
    <div>
      {homeList.map((v) => {
        return (
          <dl key={v.id} className={style['dl']} onClick={ () => navigate('/detail/' + v.id) }>
            <dt className={style['dt']}>
              <img src={v.url} alt="" width="100%"/>
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
              <b>￥：{v.price}</b>
            </dd>
          </dl>
        );
      })}
    </div>
  );
};
export default Index;
